<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DockerFly</title>
</head>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
<link rel="stylesheet" href="css/uikit/uikit.css"/>
<script src="js/common/jquery.min.js"></script>
<script src="js/common/vue.min.js"></script>
<script src="js/common/uikit.js"></script>

<link rel="stylesheet" href="css/main.css"/>
<script lang="javascript" src="js/utils.js"></script>
<script lang="javascript">
    doImport("org.voovan.docker.command.Task.CmdTaskList")
    doImport("org.voovan.docker.command.Container.CmdContainerList")
    doImport("org.voovan.docker.command.Service.CmdServiceList")
    doImport("org.voovan.docker.command.Node.CmdNodeList")

    function init() {
        taskListVue = new Vue({
            el: '#taskApp',
            data: {
                taskList: null,
                containers:[],
                services:[],
                nodes:[],
                queryParams: {
                    id:"",
                    service:"",
                    node:"",
                    desiredState:"ALL"
                }
            },
            methods: {
                //查询方法
                query: function () {
                    try {
                        var cmdTaskList = new CmdTaskList();
                        cmdTaskList.connect();
                        if (this.queryParams.id != "") {
                            cmdTaskList.id([this.queryParams.id]);
                        }

                        if (this.queryParams.service != "") {
                            cmdTaskList.service(this.queryParams.service);
                        }

                        if (this.queryParams.node != "") {
                            cmdTaskList.node(this.queryParams.node);
                        }

                        if (this.queryParams.desiredState != "ALL") {
                            cmdTaskList.desiredState(this.queryParams.desiredState);
                        }

                        //cmdContainerList.label("author","helyho");

                        this.taskList = cmdTaskList.send().sortBy("name");
                        cmdTaskList.close();
                        cmdTaskList.release();
                    } catch (e) {
                        alertError(e)
                    }
                },
                getContainers: function(){
                    try {
                        var cmdContainerList = new CmdContainerList();
                        cmdContainerList.connect();
                        cmdContainerList.all(true)

                        //cmdContainerList.label("author","helyho");
                        var containerList = cmdContainerList.send().sortBy("id", true);
                        for(var i=0;i<containerList.length;i++){
                            var container = containerList[i];
                            this.containers[container.id] = container.names[0];
                        }
                        cmdContainerList.close();
                        cmdContainerList.release();
                    } catch (e) {
                        alertError(e)
                    }
                },
                getServices: function(){
                    try {
                        var cmdServiceList = new CmdServiceList();
                        cmdServiceList.connect();
                        //cmdServiceList.label("author","helyho");
                        var serviceList = cmdServiceList.send().sortBy("id", true);
                        for(var i=0;i<serviceList.length;i++){
                            var service = serviceList[i];
                            this.services[service.id] = service.spec.name;
                        }
                        cmdServiceList.close();
                        cmdServiceList.release();
                    } catch (e) {
                        alertError(e)
                    }
                },
                getNodes: function(){
                    var cmdNodeList = new CmdNodeList();
                    cmdNodeList.connect();
                    //cmdContainerList.label("author","helyho");
                    var nodeList = cmdNodeList.send().sortBy("name");

                    for(var i=0;i<nodeList.length;i++){
                        var node = nodeList[i];
                        this.nodes[node.id] = (node.spec.name==null?node.description.hostname:node.spec.name);
                    }
                    cmdNodeList.close();
                    cmdNodeList.release();
                }
            }
        });
        var urlId = getQueryString("id");
        taskListVue.queryParams.id = urlId==null?"" : urlId;

        var urlService= getQueryString("service");
        taskListVue.queryParams.service = urlService==null?"" : urlService;

        if(urlId != null || urlService!=null){
            $("#query").hide();
        }
        taskListVue.getContainers();
        taskListVue.getServices();
        taskListVue.getNodes();
        taskListVue.query()
    }
</script>
<body onload="init()" class="frameBody">
<div id="taskApp" class="uk-grid" style="display: none" v-show="this.taskList!=null">
    <div class="uk-width-6-6">
        <div class="uk-panel"></div>
        <h3 class="uk-text-middle">Task manager</h3>
        <div id="query" class="uk-panel uk-panel-box uk-text-bold">
            <div class="uk-grid">
                <div class="uk-width-6-6 uk-form">
                    <fieldset data-uk-margin>
                    <span class="mr5">Id:</span><input class="uk-form-width-medium"
                           type="text" placeholder="task id" v-model="queryParams.id">
                    <span class="mr5">Service:</span><input class="uk-form-width-medium"
                        type="text" placeholder="service id" v-model="queryParams.service">
                    <span class="mr5">Node:</span><input class="uk-form-width-medium"
                        type="text" placeholder="node id" v-model="queryParams.node">
                    <span class="mr5">State:</span>
                        <select v-model="queryParams.desiredState" class="uk-form-width-mini">
                        <option value="ALL">All</option>
                        <option value="running">running</option>
                        <option value="shutdown">shutdown</option>
                        <option value="accepted">accepted</option>
                    </select>
                    <a class="uk-button uk-button-small" @click="query()"><i class="uk-icon-search"></i></a>
                    </fieldset>
                </div>
            </div>
        </div>
        <table id="taskList" class="uk-table uk-overflow-container uk-panel-box">
            <caption>Task list</caption>
            <thead>
            <tr>
                <th class="uk-text-center uk-width-1-10"> NO.</th>
                <th class="uk-width-1-10">ID</th>
                <th class="uk-width-1-10">Node</th>
                <th class="uk-width-1-10">Service</th>
                <th class="uk-width-1-10">Container</th>
                <th class="uk-width-1-10">State</th>
                <th class="uk-width-1-10">Create</th>
                <th class="uk-width-1-10">Update</th>
            </tr>
            </thead>

            <tbody>
            <tr v-for="(task,index) in taskList">
                <td class="uk-text-center uk-text-middle uk-text-small">{{index+1}}</td>
                <td class=" uk-text-middle uk-text-bold uk-text-primary">{{task.id | shortDockerId(12)}}</td>
                <td class=" uk-text-middle uk-text-bold ">
                    <a class="uk-text-success" :href="'node.html?id='+task.nodeId">{{nodes[task.nodeId]}}</a>
                </td>
                <td class=" uk-text-middle uk-text-bold ">
                    <a class="uk-text-warning" :href="'service.html?id='+task.serviceId" v-if="services[task.serviceId]!=null">
                        {{services[task.serviceId]}}
                    </a>
                    <span class="uk-text-warning" v-else>
                        {{task.serviceId|shortDockerId(12)}}
                    </span>
                </td>
                <td class=" uk-text-middle uk-text-bold ">
                    <a class="uk-text-danger" :href="'container.html?id='+task.status.containerStatus.containerId"
                       v-if="containers[task.status.containerStatus.containerId]!=null">
                        <span class="uk-text-success uk-icon-circle"></span> {{containers[task.status.containerStatus.containerId]|delFirestChar|shortDockerId(18)}}
                    </a>
                    <span class="uk-text-danger" v-else>
                        <span class="uk-text-primary uk-icon-circle"></span> {{task.status.containerStatus.containerId|shortDockerId(12)}}
                    </span>
                </td>
                <td class=" uk-text-middle uk-text-bold">{{task.desiredState}}</td>
                <td class=" uk-text-middle uk-text-small">{{task.createdAt|strToDate}}</td>
                <td class=" uk-text-middle uk-text-small">{{task.updatedAt|strToDate}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="uk-width-6-6">
        <div style="min-height:40px; margin-bottom:10px" class="uk-text-center">
            <div><img height="27" width="120" src="img/logo.png"/></div>
            <div>CopyRight <span class="uk-icon-copyright"></span> Voovan Vsetful</div>
            <div>Powered by Voovan open source framework.</div>
            <div></div>
        </div>
    </div>
</div>

</body>
</html>